<template>
  <div class="topbar">
    <!-- 版心 -->
    <div class="topbarwarp warp">
      <div class="left">欢迎来到叩丁狼积分商城</div>
      <ul class="right">
        <li><img src="../assets/img/userImg.f8bbec5e.png" />用户名：王老五</li>
        <li>我的鸡腿：999</li>
        <li>获取积分</li>
        <li>叩丁狼官网</li>
        <li class="cart-btn" v-if="isloginstatus">
          <img src="../assets/img/cart.png" alt="" />
          <span>购物车</span>
          <strong>{{ 99 }}</strong>
        </li>
        <li @click="changeLoginModal(true)" v-else>登录</li>
      </ul>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import { mapMutations, mapState } from "vuex";
import { WeiXinLoginAPI } from "@/request/API";
export default {
  created() {
    console.log("topbar----执行了");
    // console.log("created...",this.$route.query.code);
    this.$router.onReady(async () => {
      let paramscode = this.$route.query.code;
      if (paramscode) {
        let res = await WeiXinLoginAPI({
          code: paramscode,
        });
        console.log(res);
        if (res.code == 0) {
          //成功
          alert("登录成功");
          localStorage.setItem("x-auth-token", res["x-auth-token"]);
          //3.更新登陆状态
          this.changeloginstatus(true);
          //4.清除地址栏code
          this.$router.push(this.$route.path);
        } else if (res.code == 400) {
          //1.二维码失效
          alert("请重新扫码");
          //2.弹出登录框，引导用户去扫码
          this.changeLoginModal(true);
        } else if (res.code == 407) {
          //第一次登录 （会有uuid）
          alert("请使用手机号在登陆一次");
          //2.弹出登陆框
          this.changeLoginModal(true);
          //3.本地存储uuid
          localStorage.setItem("uuid", res.uuid);
          //4.清除地址栏的code
          this.$router.push(this.$route.path);
        }
      }else{
         let token = localStorage.setItem("x-auth-token");
         this.changeloginstatus(Boolean(token));
      }
    });
  },
  computed: {
    ...mapState({
      isloginstatus: (state) => state.loginstatus.isloginstatus,
    }),
  },
  methods: {
    ...mapMutations({
      //当前组件的方法名："模块名/属性名"
      changeLoginModal: "showmodal/changeLoginModal",
      changeloginstatus: "loginstatus/changeloginstatus",
    }),
  },
  watch: {
    //方式一：监听路由地址
    //监听路由地址
    "$route.path": {
      handler(newval, oldval) {
        console.log("地址改变了。。。。");
        let token = localStorage.setItem("x-auth-token");
        // if(token){
        //    this.changeloginstatus(true);
        // }else{
        //    this.changeloginstatus(false);
        // }
        this.changeloginstatus(Boolean(token));
      },
    },
    //方式二：组件重组 ----- app.vue

  },
};
</script>

<style lang="less" scoped>
.topbar {
  height: 40px;
  background: #242b39;
  .topbarwarp {
    font-size: 14px;
    // font-family: SourceHanSansSC;
    font-weight: 300;
    color: #fffefe;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    .right {
      display: flex;
      li {
        padding: 0 10px;
        text-align: center;
        cursor: pointer;
        img {
          width: 23px;
          height: 22px;
          border-radius: 13px;
          vertical-align: middle;
        }
      }
      :nth-child(5) {
        padding: 0;
        width: 124px;
        height: 40px;
        background: #0a328e;
      }
    }
    .cart-btn {
      width: 124px;
      height: 40px;
      background: #0a328e;
      text-align: center;
      img {
        width: 20px;
        height: 19px;
        vertical-align: middle;
      }
      span {
        margin: 0 8px;
      }
      strong {
        width: 22px;
        height: 22px;
        line-height: 22px;
        display: inline-block;
        border-radius: 50%;
        background-color: #fd604d;
      }
    }
  }
}
</style>